<template>
	<view class="hotel-Popup-box">
		<scroll-view class="scroll-Popup" scroll-y="true" :style="{ height: `calc(100vh - ${navbarHeight}px)` }">
			<view class="swiper-box">
				<swiper :circular="true" :autoplay="true" interval="5000" duration="500"
					:style="{height:`${swiperHeight}rpx`}" :current="swiperCurrent" @change="changeSwiper">
					<swiper-item v-for="(item, index) in swiperImages" :key="index">
						<view class="swiper-slide">
							<image :src="imageUrl + item" class="slide-img" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>

				<view class="indicator-dots">
					<block v-for="(item,index) in swiperImages.length" :key="item">
						<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
					</block>
				</view>
				<view class="cancel-box" @click="closePopup">
					<text>+</text>
				</view>
			</view>
			<view class="content-box">
				<text class="Hotel-Name">{{selectedItem?.scenic_name || '未知景点'}}</text>
				<view class="Hotel-info">
					<view>
						<text class="title">景点名称</text>
						<text>{{ selectedItem?.scenic_name || '未知景点' }}</text>
					</view>
					<view>
						<text class="title">描述</text>
						<text>{{ selectedItem?.scenic_decr || '暂无描述' }}</text>
					</view>
				</view>
				<text class="content-text">
					<!-- 是\n查 -->
				</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		navbarHeight
	} from '@/config/systemInfo.js'
	import {
		ref,
		defineEmits,
		watchEffect
	} from 'vue';
	import {
		imageUrl
	} from '../../../config/request/request';
	const swiperCurrent = ref(0)
	const swiperImages = ref([])
	const props = defineProps({
		swiperImg: {
			type: Array,
			default: () => [0, 1, 2, 2, 2, 3],
		},
		swiperHeight: {
			type: Number,
			default: 500,
		},
		showPopup: {
			type: Boolean,
			default: false,
		},
		selectedItem: {
			type: Object,
			default: () => {}
		}
	});
	watchEffect(() => {
		if (props.selectedItem?.scenic_img) {
			// 清空数组
			swiperImages.value = [];
			// 将逗号分隔的图片字符串转换为数组
			const imgArray = props.selectedItem.scenic_img.split(',');
			// 过滤掉空字符串并添加到轮播数组
			swiperImages.value = imgArray.filter(img => img.trim() !== '');
		}
	})
	const changeSwiper = (e) => {
		console.log(e);
		swiperCurrent.value = e.detail.current
	}

	const emit = defineEmits();
	const closePopup = () => {
		emit('closePopup');
	};
</script>

<style lang="scss" scoped>
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.hotel-Popup-box {
		width: 100%;
		max-height: 100vh;
		min-height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		z-index: 7;
		background-color: rgba(0, 0, 0, 0.5);
		transform: translateY(100%);
		animation: slideUp 0.3s ease forwards;

		.scroll-Popup {
			width: 100%;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			border-radius: 25rpx 25rpx 0 0;

			.swiper-box {
				width: 100%;
				position: relative;

				.swiper-slide {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.slide-img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.indicator-dots {
					width: 100%;
					display: flex;
					position: absolute;
					bottom: 30rpx;
					left: 50%;
					transform: translate(-50%, 0);
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 0;

					.dot {
						width: 24rpx;
						height: 4rpx;
						background: rgba(225, 255, 255, .3);
					}

					.active {
						background-color: #fff;
					}
				}

				.cancel-box {
					position: absolute;
					top: 25rpx;
					right: 25rpx;
					width: 48rpx;
					height: 48rpx;
					background-color: rgba(225, 225, 225, .6);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					transform: rotate(45deg);

					text {
						width: 100%;
						height: 100%;
						font-size: 48rpx;
						text-align: center;
						line-height: 42rpx;
					}
				}
			}

			.content-box {
				width: 100%;
				min-height: 30vh;
				padding: 35rpx 25rpx;
				box-sizing: border-box;

				.Hotel-Name {
					font-size: 34rpx;
					letter-spacing: 2rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.Hotel-info {
					display: flex;
					flex-direction: column;
					gap: 25rpx;
					margin: 50rpx 0;

					>view {
						display: flex;
						align-items: baseline;
						gap: 20rpx;

						text {
							font-size: 30rpx;
						}

						.title {
							min-width: 140rpx;
							color: #999;
						}

						.address {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.content-text {
					display: block;
					width: 100%;
					min-height: 60vh;
					font-size: 30rpx;

					text {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>